<template>
  <div class="m-body">
    <div class="m-banner"></div>
    <div class="m-info">
      <img
        :src="userinfo.imgUrl || require('@/assets/images/user.jpg')"
        alt=""
      />
      <div class="info-item">
        <div class="info-item-top">
          <div class="fans">
            <span class="num">--</span>
            <span class="type">粉丝</span>
          </div>
          <div class="follow">
            <span class="num">9</span>
            <span class="type">关注</span>
          </div>
          <div class="likes">
            <span class="num">--</span>
            <span class="type">获赞</span>
          </div>
        </div>
        <div class="info-item-bottom">
          <button @click="toggledetail = true">编辑资料</button>
        </div>
      </div>
    </div>
    <div class="user-id">
      <p><span>45744963276_bili</span></p>
      <div class="user-desc">
        <div class="content">这个人很神秘，什么都没有写</div>
        <div @click="togglecur = !togglecur" class="control">
          {{ togglecur ? "收起" : "展开" }}
        </div>
        <div class="tags" v-show="togglecur"><span>uid:409651357</span></div>
      </div>
    </div>
    <div class="tabs-wrap">
      <div class="tabs">
        <span :class="{ on: current }" @click="current = true">动态</span>
        <span :class="{ on: !current }" @click="current = false">视频</span>
      </div>
      <div class="list">
        <div class="ending" v-show="current">到达动态的尽头惹～</div>
        <div class="empty-arc" v-show="!current">
          <img
            src="//s1.hdslb.com/bfs/static/jinkela/mstation-h5/assets/noContent.png"
            alt=""
          />
          <p>Ta还没有投过稿~</p>
          <p>快去发现 <a href="javascript:;">新内容</a> 吧!</p>
        </div>
      </div>
    </div>
    <div class="m-footer">
      <p>信息网络传播视听节目许可证：0910417</p>
      <p>网络文化经营许可证 沪网文【2019】3804-274号</p>
      <p>广播电视节目制作经营许可证：（沪）字第01248号</p>
      <p>增值电信业务经营许可证 沪B2-20100043</p>
    </div>
    <transition>
      <div class="edit-user" v-show="toggledetail">
        <div class="info-card">
          <ul class="info-list">
            <li>
              <van-uploader
                :after-read="afterRead"
                class="upload-file"
                preview-size="100vw"
              />
              <span>头像</span>
              <span
                ><img
                  :src="userinfo.imgUrl || require('@/assets/images/user.jpg')"
                  alt=""
              /></span>
            </li>
            <li @click="showname = true">
              <span>昵称</span>
              <span>{{ userinfo.petname }}</span>
            </li>
            <li>
              <span>UID</span>
              <span>409651357</span>
            </li>
            <li @click="showsex = true">
              <span>性别</span>
              <span>{{ sex }}</span>
            </li>
            <li @click="showtime = true">
              <span>出生日期</span>
              <span>{{ JSON.stringify(userinfo.brithday).slice(1, 11) }}</span>
            </li>
            <li @click="showdesc=true">
              <span>个性签名</span>
              <span>{{ userinfo.des }}</span>
            </li>
          </ul>
        </div>
        <div class="op-card">
          <a @click="logout">退出登录</a>
          <a @click="toggledetail = false">返回空间</a>
        </div>
      </div>
    </transition>
   
     <van-overlay :show="showname" @click="showname = false">
 <van-dialog
      v-model="showname"
      title="编辑昵称"
      show-cancel-button
      @confirm="setpatName"
      @cancel="patname = ''"
    >
      <van-field v-model="patname" placeholder="请输入内容" :maxlength="10" />
    </van-dialog>
   </van-overlay>
   
 <van-overlay :show="showsex" @click="showsex = false">
 <van-action-sheet
      v-model="showsex"
      :actions="actions"
      @select="onSelect"
      cancel-text="取消"
      close-on-click-action
      @cancel="onCancel"
    />
   </van-overlay>
   
   <van-overlay :show="showtime" @click="showtime = false">
     <van-popup v-model="showtime" position="bottom">
       <van-datetime-picker
      v-if="showtime"
      v-model="brithday"
      type="date"
      title="选择年月日"
      :min-date="minDate"
      :max-date="maxDate"
      @confirm="setTime"
      @cancel="showtime = false"
    />
     </van-popup>
 
   </van-overlay>
   <van-overlay :show="showdesc" @click="showdesc = false">
       <van-dialog
      v-model="showdesc"
      title="个性签名"
      show-cancel-button
      @confirm="setdescName"
      @cancel="descname = ''"
    >
    <van-field
  v-model="descname"
  rows="2"
  autosize
  type="textarea"
  placeholder="请输入个性签名"
/>
    </van-dialog>
   </van-overlay>
  </div>
</template>

<script>
export default {
  data() {
    return {
      togglecur: false,
      current: true,
      toggledetail: false,
      imgUrl: undefined,
      userinfo: {},
      showname: false,
      patname: "",
      setsex: "",
      showsex: false,
      actions: [{ name: "男", pid: 1 }, { name: "女", pid: 0 }],
      showtime: false,
      showdesc: false,
      brithday: new Date(),
      minDate: new Date(1960, 0, 1),
      maxDate: new Date(2021, 11, 30),
      descname:""
    };
  },
  methods: {
    afterRead(file) {
      console.log(file);
      file &&
        (() => {
          this.userinfo.imgUrl = file.content;
        })();
      sessionStorage.setItem("token", JSON.stringify(this.userinfo));
    },
    setpatName() {
      this.patname &&
        (() => {
          this.userinfo.petname = this.patname;
        })();
      this.updaeUser();
    },
    onSelect(item) {
      this.setsex = item.pid;
      this.userinfo.sex = this.setsex;
      this.brithday = value;
      this.updaeUser();
    },
    onCancel() {
      this.showsex = false;
    },
    updaeUser() {
      sessionStorage.setItem("token", JSON.stringify(this.userinfo));
      this.userinfo = JSON.parse(sessionStorage.getItem("token"));
    },
    setTime(value) {
      this.userinfo.brithday = value;
      this.updaeUser();
      this.showtime = false;
    },
    setdescName(){
      this.userinfo.desc = this.descname
      this.updaeUser()
    },
    logout(){
     this.$dialog.confirm({
  title: '提示',
  message: '是否退出登录?',
})
  .then(() => {
   sessionStorage.removeItem('token')
   this.$router.push('/login')
  })
  .catch(() => {
    // on cancel
  });
    }
  },
  computed: {
    sex() {
      return this.userinfo.sex == 1 ? "男" : "女";
    },
  },

  created() {
    this.userinfo = JSON.parse(sessionStorage.getItem("token"));
    this.brithday = this.userinfo.brithday
      ? new Date(JSON.stringify(this.userinfo.brithday).slice(1, 11))
      : new Date();
  },
};
</script>

<style lang="less" scoped>
.m-body {
  background-color: #fff;
  .m-banner {
    width: 100vw;
    height: 24vw;
    overflow: hidden;
    background: url(//s1.hdslb.com/bfs/static/jinkela/mstation-h5/assets/bannerTop_new.png);
    background-size: cover;
    background-position: 50%;
  }
  .m-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 3.2vw;
    img {
      width: 25vw;
      height: 25vw;
      border-radius: 50%;
    }
    .info-item {
      padding-left: 20vw;
      display: flex;
      flex-direction: column;
      flex: 1;

      .info-item-top {
        justify-content: space-between;
        display: flex;
        text-align: center;
        & > div {
          display: flex;
          flex-direction: column;
          .num {
            font-size: 3.73333vw;
            color: #212121;
            line-height: 4.26667vw;
          }
          .type {
            font-size: 2.93333vw;
            color: #999;
          }
        }
      }
      .info-item-bottom {
        button {
          width: 100%;
          display: block;
          height: 8vw;
          background: #fff;
          box-sizing: border-box;
          border-radius: 1.06667vw;
          font-size: 3.73333vw;
          margin-top: 3.2vw;
          outline: none;
          border: 1px solid #fb7299;
          color: #fb7299;
        }
      }
    }
  }
  .user-id {
    padding: 5vw 3.2vw;

    p {
      font-size: 4.8vw;
      color: #212121;
      max-width: 62.66667vw;
      vertical-align: middle;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .user-desc {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .content {
        margin-top: 2.13333vw;
        font-size: 3.46667vw;
        color: #999;
        line-height: 4.53333vw;
        width: 83.46667vw;
        height: 4.53333vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .control {
        margin-top: 1.86667vw;
        font-size: 3.46667vw;
        color: #1389bf;
      }
      .tags {
        margin-top: 1.86667vw;
        margin-bottom: -1.33333vw;
        width: 100vw;
        span {
          font-size: 3.73333vw;
          padding: 0.53333vw 1.33333vw;
          margin-right: -2.66667vw;
          color: #505050;
          display: inline-block;
          background: #f4f4f4;
          border-radius: 0.53333vw;
          -webkit-transform: scale(0.71);
          transform: scale(0.71);
          -webkit-transform-origin: left;
          transform-origin: left;
        }
      }
    }
  }
  .tabs-wrap {
    .tabs {
      height: 10.66667vw;
      line-height: 10.66667vw;
      padding-left: 3.2vw;
      background: #fff;
      border-top: 1px solid #e7e7e7;
      border-bottom: 1px solid #e7e7e7;
      font-size: 0;
      span {
        display: inline-block;
        margin-right: 8.53333vw;
        color: #757575;
        font-size: 3.46667vw;
      }
    }
    .list {
      .ending {
        text-align: center;
        font-size: 13px;
        line-height: 40px;
        background: #f4f4f4;
        color: #757575;
      }
      .empty-arc {
        padding: 10vw 0 4.26667vw;
        text-align: center;
        img {
          width: 74.66667vw;
          margin-bottom: 4vw;
        }
        p {
          font-size: 4.26667vw;
          color: #999;
          line-height: 5.33333vw;
          a {
            color: #fb7299;
          }
        }
      }
    }
  }
  .m-footer {
    text-align: center;
    background-color: #f4f4f4;
    padding: 3.2vw 1.33333vw;
    p {
      color: #999;
      font-size: 3.2vw;
      line-height: 6.4vw;
    }
  }
}
.on {
  color: #fb7299 !important;
}
.edit-user {
  width: 100vw;
  position: fixed;
  left: 0;
  top: 11.73333vw;
  height: 100vh;
  background: #f4f4f4;

  .info-card {
    width: 100%;
    background: #fff;
    font-size: 4vw;
    margin-top: 3.2vw;
    .info-list {
      li {
        position: relative;
        padding: 2.66667vw 0;
        display: flex;
        border-bottom: 1px solid #eee;
        justify-content: space-between;
        align-items: center;
        .upload-file {
          overflow: hidden;
          opacity: 0;
          position: absolute;
          height: 100%;
          left: 0;
          top: 0;
        }
        & > span:nth-of-type(1) {
          padding-left: 3.2vw;
          text-align: left;
          color: #505050;
        }
        & > span:nth-of-type(2) {
          padding-right: 3.2vw;
          text-align: right;
          color: #999;
          max-width: 48vw;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          img {
            width: 15vw;
            height: 15vw;
            border-radius: 50%;
            vertical-align: middle;
          }
        }
      }
    }
  }
  .op-card {
    margin-top: 5.33333vw;
    & > a:nth-of-type(1) {
      border-bottom: 1px solid #eee;
    }
    a {
      display: block;
      padding: 2.66667vw;
      text-align: center;
      color: #505050;
      text-decoration: none;
      background: #fff;
      font-size: 3.73333vw;
    }
  }
}
.v-enter,
.v-leave-to {
  transform: translateX(100vw);
}
.v-enter-active,
.v-leave-active {
  transition: all 0.5s;
}
</style>
